<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!--当前示例页面样式表引用-->
    <link rel="stylesheet" href="./static/demo/openlayers/example/style.css" />
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-openlayers-local.js"></script>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }
        
        .ol-mouse-position {
            top: 95%;
            right: 8px;
            position: absolute;
        }
        
        label {
            color: white;
            font-size: 6px;
            font-weight: 500;
            font-family: cursive;
            line-height: 10px;
            margin: 5px 5px;
        }
        
        select {
            height: 16px;
            font-size: 6px;
            width: 80px;
            font-family: cursive;
        }
    </style>

    <script type="text/javascript">
        var tdk = '4c27d6e0e8a90715b23a989d42272fd8' //天地图密钥
        var mousePositionControl = null
        var map = null

        function init() {
            //加载天地图瓦片图层数据
            var TiandiMap_vect = new ol.layer.Tile({
                title: '天地图矢量图层',
                source: new ol.source.XYZ({
                    url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + tdk,
                    wrapX: false,
                    crossOrigin: 'Anonymous',
                }),
            })

            var TiandiMap_vectcia = new ol.layer.Tile({
                    title: '天地图矢量注记图层',
                    source: new ol.source.XYZ({
                        url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + tdk,
                        crossOrigin: 'Anonymous',
                    }),
                })
                //初始化地图容器
            map = new ol.Map({
                target: 'mapCon', //地图容器div的ID
                controls: ol.control.defaults({
                    attributionOptions: {
                        collapsible: true,
                    },
                }),
                view: new ol.View({
                    center: [12000000, 4000000], //地图初始中心点
                    maxZoom: 28, //最大瓦片显示级数
                    minZoom: 1, //最小瓦片显示级数
                    zoom: 6, //地图初始显示级数
                }),
                layers: [TiandiMap_vect, TiandiMap_vectcia],
            })

            mousePositionControl = new ol.control.MousePosition({
                coordinateFormat: ol.coordinate.createStringXY(4),
                // projection: 'EPSG:3857'
            })
            map.addControl(mousePositionControl)
        }

        var preEventType = null

        function ChangeEvent(eventType) {
            //取消上一次鼠标绑定的点击事件
            if (preEventType != null) {
                map.un(preEventType, eventCallback)
            }
            //鼠标绑定点击事件
            map.on(eventType, eventCallback)
            preEventType = eventType
        }

        function eventCallback(e) {
            alert(e.type)
        }
    </script>
</head>

<body onload="init()">
    <div id="mapCon"></div>
    <fieldset style="position: absolute;width: 140px;height: 25px;top: 18px;right: 50px;background-color: black;opacity: 0.5;border-radius: 10px;padding: 10px 6px;">
        <label>事件:</label>
        <select id="format" onchange="ChangeEvent(this.value)">
                <option value="click">鼠标点击</option>
                <option value="singleclick">鼠标单击</option>
                <option value="dblclick">鼠标双击</option>
                <option value="moveend">地图移动</option>
            </select>
    </fieldset>
</body>

</html>